<template>
	<view class="content">
		<cusHeaderVue titleContent="在线调研" :showBack="true"></cusHeaderVue>
		<scroll-view scroll-y="true"
			:style="{paddingTop: `calc(${scrollerHeight} + 90rpx)`,height: `calc(100vh - ${scrollerHeight} - 90rpx`}">
			<view class="contBox">
				<view class="personBox">
					<view class="approvalTit">
						您的年龄段
					</view>
					<view class="approvalLiBox">
						<view class="approvalLi" :class="ageBracketIndex==index?'approvalLiA':''" v-for="(item,index) in ageBracket" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="personBox">
					<view class="approvalTit">
						您的个人年收入范围
					</view>
					<view class="approvalLiBox">
						<view class="approvalLi" :class="incomeIndex==index?'approvalLiA':''" v-for="(item,index) in income" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				
				<view class="personBox">
					<view class="approvalTit">
						最可能促使您购买的促销方式
					</view>
					<view class="approvalLiBox">
						<view class="approvalLi" :class="promotionIndex==index?'approvalLiA':''" v-for="(item,index) in promotion" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="personBox">
					<view class="approvalTit">
						您会向朋友推荐该产品的可能性
					</view>
					<view class="approvalLiBox">
						<view class="approvalLi" :class="recommendIndex==index?'approvalLiA':''" v-for="(item,index) in recommend" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				
				<view class="personBox">
					<view class="approvalTit">
						反馈照片
					</view>
					<view class="popupImg">
						<view class="popupImgLi">
							<image src="/static/home/zhaopikan.png" mode=""></image>
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<view class="btnBox">
			<view class="btnLi">
				确认提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import cusHeaderVue from '@/components/cus-header.vue';
	const scrollerHeight = ref('');
	const ageBracketIndex = ref(0);
	const ageBracket = ref([{name:'18岁以下'},{name:'18-35岁'},{name:'36-45岁'},{name:'46岁以上'}]);
	const incomeIndex = ref(0);
	const income = ref([{name:'5万以下'},{name:'5-10万'},{name:'10-20万'},{name:'20-50万'}]);
	const promotionIndex = ref(0);
	const promotion = ref([{name:'限时折扣'},{name:'赠品'},{name:'会员积分'},{name:'捆绑销售'}]);
	const recommendIndex = ref(0);
	const recommend = ref([{name:'极有可能'},{name:'可能'},{name:'不太可能'},{name:'绝不推荐'}]);


	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(res) {
				scrollerHeight.value = res.statusBarHeight + 'px'
			}
		});
	}

	const toUrl = (urlSrc) => {
		uni.navigateTo({
			url: urlSrc
		})
	}
	onLoad(() => {
		getBarHeight();
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background: #ffffff;
	}

	.bgColor {
		width: 100%;
		height: 740rpx;
		position: absolute;
		z-index: -1;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		padding: 22rpx 40rpx;
		box-sizing: border-box;
		padding-bottom: calc(env(safe-area-inset-bottom) + 101rpx);
		.personBox {
			width: 100%;
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: #ffffff;
			margin-bottom: 46rpx;
			.approvalTit {
				font-weight: 500;
				font-size: 33.33rpx;
				color: #1C2027;
				margin-bottom: 23rpx;
			}
			.approvalLiBox{
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				/* 三等份列 */
				gap: 16rpx;
				.approvalLi{
					width: 212.82rpx;
					height: 68.59rpx;
					border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
					background: #f5f6fa;
					font-size: 26.92rpx;
					font-weight: 400;
					color: #222222;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.approvalLiA{
					background: #fca21521;
					color: #FC6015;
					border: 1px solid #FC6015;
				}
			}
			.popupAnnex{
				margin-top: 25rpx;
				font-size: 24.36rpx;
				font-weight: 400;
				color: #7F8494;
				display: flex;
				align-items: center;
				.popupAnnexBtn{
					width: 173.08rpx;
					height: 61.54rpx;
					border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
					background: #f4f6f991;
					font-size: 24.36rpx;
					font-weight: 400;
					color: #222222;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.approvaltextarea{
				width: 100%;
				border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
				background: #f4f6f991;
				padding: 19rpx;
				box-sizing: border-box;
				border: 1px solid #eaecf1;
				textarea {
					font-weight: 400;
					width: 100%;
					height: 200rpx;
					font-size: 24.36rpx;
					font-weight: 400;
					color: #7F8494;
				}
			}

			.popupImg {
				.popupImgLi {
					margin-top: 21rpx;
					width: 196.15rpx;
					height: 196.15rpx;
					border-radius: 10.26rpx 10.26rpx 10.26rpx 10.26rpx;
					background: #f4f6f991;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #eaecf1;

					image {
						width: 62.82rpx;
						height: 45.51rpx;
					}
				}
			}

			
		}





	}

	.btnBox {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		// bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		bottom: 0;
		width: 100%;
		left: 0;
		padding: 20rpx 55rpx calc(env(safe-area-inset-bottom) + 20rpx);
		box-sizing: border-box;
		background: #ffffff;

		.btnLi {
			height: 80rpx;
			border-radius: 40.38rpx 40.38rpx 40.38rpx 40.38rpx;
			background: linear-gradient(-90deg, #feaf38, #f98434);
			box-shadow: 0 3.85rpx 4.49rpx 0 #f984344d;
			color: #ffffff;
			width: 512.82rpx;
			
			font-size: 32.05rpx;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		
	}
</style>